import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import moment from 'moment';
import {
  Row, Col, Card, Form, Input, Select, Icon,
  Button, Dropdown, Menu, InputNumber,
  DatePicker, Modal, message, Badge,
  Divider, Tag,
} from 'antd';
import StandardTable from '../../components/StandardTable';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import DescriptionList from '../../components/DescriptionList';
import styles from './UserDetails.less';

/*
 员工信息详情界面
*/
const FormItem = Form.Item;
const { Description } = DescriptionList;

function handleChange(value) {
  console.log(`selected ${value}`);
}

@connect(({ rule, loading }) => ({
  rule,
  loading: loading.models.rule,
}))
@Form.create()
export default class UserDetails extends PureComponent {
  state = {
    user: {
      name: '测试001',
      userName: 'yqcp1',
      userNumber: '00123',
      contact: '15022984736',
      organisation: '黄石分行',
      jobs: '客户经理',
    },
    nameInEdit: false,
    userNameInEdit: false,
    userNumberInEdit: false,
    contactInEdit: false,
    organisationInEdit: false,
    jobsInEdit: false,
  };
  // -----------姓名
  hanleClickEditName = () => {
    this.setState({
      nameInEdit: true,
      userTemp: this.state.user,
    });
  }
  hanleClickSaveName = () => {
    this.setState({
      nameInEdit: false,
    });
  }
  hanleClickCancelName = () => {
    this.setState({
      nameInEdit: false,
      user: {
        ...this.state.user,
        name: this.state.userTemp.name,
      }
    });
  }
  handleNameChange = (e) => {
    const value = e.target.value;
    this.setState({
      user: {
        ...this.state.user,
        name: value,
      }
    });
  }
  // -----------用户名
  hanleClickEditUserName = () => {
    this.setState({
      userNameInEdit: true,
      userTemp: this.state.user,
    });
  }
  hanleClickSaveUserName = () => {
    this.setState({
      userNameInEdit: false,
    });
  }
  hanleClickCancelUserName = () => {
    this.setState({
      userNameInEdit: false,
      user: {
        ...this.state.user,
        userName: this.state.userTemp.userName,
      }
    });
  }
  handleUserNameChange = (e) => {
    const value = e.target.value;
    this.setState({
      user: {
        ...this.state.user,
        userName: value,
      }
    });
  }
  // -----------员工号
  hanleClickEditUserNumber = () => {
    this.setState({
      userNumberInEdit: true,
      userTemp: this.state.user,
    });
  }
  hanleClickSaveUserNumber = () => {
    this.setState({
      userNumberInEdit: false,
    });
  }
  hanleClickCancelUserNumber = () => {
    this.setState({
      userNumberInEdit: false,
      user: {
        ...this.state.user,
        userNumber: this.state.userTemp.userNumber,
      }
    });
  }
  handleUserNumberChange = (e) => {
    const value = e.target.value;
    this.setState({
      user: {
        ...this.state.user,
        userNumber: value,
      }
    });
  }
  // -----------联系方式
  hanleClickEditContact = () => {
    this.setState({
      contactInEdit: true,
      userTemp: this.state.user,
    });
  }
  hanleClickSaveContact = () => {
    this.setState({
      contactInEdit: false,
    });
  }
  hanleClickCancelContact = () => {
    this.setState({
      contactInEdit: false,
      user: {
        ...this.state.user,
        contact: this.state.userTemp.contact,
      }
    });
  }
  handleContactChange = (e) => {
    const value = e.target.value;
    this.setState({
      user: {
        ...this.state.user,
        contact: value,
      }
    });
  }
  // -----------所属组织
  hanleClickEditOrganisation = () => {
    this.setState({
      organisationInEdit: true,
      userTemp: this.state.user,
    });
  }
  hanleClickSaveOrganisation = () => {
    this.setState({
      organisationInEdit: false,
    });
  }
  hanleClickCancelOrganisation = () => {
    this.setState({
      organisationInEdit: false,
      user: {
        ...this.state.user,
        organisation: this.state.userTemp.organisation,
      }
    });
  }
  handleOrganisationChange = (e) => {
    const value = e.target.value;
    this.setState({
      user: {
        ...this.state.user,
        organisation: value,
      }
    });
  }
   // -----------岗位
   hanleClickEditJobs = () => {
    this.setState({
      jobsInEdit: true,
      userTemp: this.state.user,
    });
  }
  hanleClickSaveJobs = () => {
    this.setState({
      jobsInEdit: false,
    });
  }
  hanleClickCancelJobs = () => {
    this.setState({
      jobsInEdit: false,
      user: {
        ...this.state.user,
        jobs: this.state.userTemp.jobs,
      }
    });
  }
  handleJobsChange = (e) => {
    const value = e.target.value;
    this.setState({
      user: {
        ...this.state.user,
        jobs: value,
      }
    });
  }


  render() {
    return (
      <PageHeaderLayout title="员工信息">
        <Card bordered={false}>
          <DescriptionList style={{ marginBottom: 32 }} col={2}>
            <Description term="姓名">
              <Row>
                <Col span={16}>
                  {this.state.nameInEdit ?
                    <Input
                      defaultValue={this.state.user.name}
                      placeholder="请输入"
                      onChange={this.handleNameChange}
                      onPressEnter={this.hanleClickSaveName}
                      style={{ width: 150 }}
                    />
                    :
                    this.state.user.name
                  }
                </Col>
                <Col span={8}>
                  {this.state.nameInEdit ?
                    <div>
                      <Icon
                        type="check"
                        className="editable-cell-icon"
                        onClick={this.hanleClickSaveName}
                      />
                      <Icon
                        type="close"
                        className="editable-cell-icon"
                        onClick={this.hanleClickCancelName}
                      />
                    </div>
                    :
                    <Icon
                      type="edit"
                      className="editable-cell-icon"
                      onClick={this.hanleClickEditName}
                    />
                  }
                </Col>
              </Row>

            </Description>
            <Description term="用户名">
              <Row>
                <Col span={16}>
                  {this.state.userNameInEdit ?
                    <Input
                      defaultValue={this.state.user.userName}
                      placeholder="请输入"
                      onChange={this.handleUserNameChange}
                      onPressEnter={this.hanleClickSaveUserName}
                      style={{ width: 150 }}
                    />
                    :
                    this.state.user.userName
                  }
                </Col>
                <Col span={8}>
                  {this.state.userNameInEdit ?
                    <div>
                      <Icon
                        type="check"
                        className="editable-cell-icon"
                        onClick={this.hanleClickSaveUserName}
                      />
                      <Icon
                        type="close"
                        className="editable-cell-icon"
                        onClick={this.hanleClickCancelUserName}
                      />
                    </div>
                    :
                    <Icon
                      type="edit"
                      className="editable-cell-icon"
                      onClick={this.hanleClickEditUserName}
                    />
                  }
                </Col>
              </Row>
            </Description>
            <Description term="员工号">
              <Row>
                <Col span={16}>
                  {this.state.userNumberInEdit ?
                    <Input
                      defaultValue={this.state.user.userNumber}
                      placeholder="请输入"
                      onChange={this.handleUserNumberChange}
                      onPressEnter={this.hanleClickSaveUserNumber}
                      style={{ width: 150 }}
                    />
                    :
                    this.state.user.userNumber
                  }
                </Col>
                <Col span={8}>
                  {this.state.userNumberInEdit ?
                    <div>
                      <Icon
                        type="check"
                        className="editable-cell-icon"
                        onClick={this.hanleClickSaveUserNumber}
                      />
                      <Icon
                        type="close"
                        className="editable-cell-icon"
                        onClick={this.hanleClickCancelUserNumber}
                      />
                    </div>
                    :
                    <Icon
                      type="edit"
                      className="editable-cell-icon"
                      onClick={this.hanleClickEditUserNumber}
                    />
                  }
                </Col>
              </Row>
            </Description>
            <Description term="联系方式">
              <Row>
                <Col span={16}>
                  {this.state.contactInEdit ?
                    <Input
                      defaultValue={this.state.user.contact}
                      placeholder="请输入"
                      onChange={this.handleContactChange}
                      onPressEnter={this.hanleClickSaveContact}
                      style={{ width: 150 }}
                    />
                    :
                    this.state.user.contact
                  }
                </Col>
                <Col span={8}>
                  {this.state.contactInEdit ?
                    <div>
                      <Icon
                        type="check"
                        className="editable-cell-icon"
                        onClick={this.hanleClickSaveContact}
                      />
                      <Icon
                        type="close"
                        className="editable-cell-icon"
                        onClick={this.hanleClickCancelContact}
                      />
                    </div>
                    :
                    <Icon
                      type="edit"
                      className="editable-cell-icon"
                      onClick={this.hanleClickEditContact}
                    />
                  }
                </Col>
              </Row>
            </Description>
          </DescriptionList>
          <DescriptionList style={{ marginTop: 40 }} col={2}>
            <Description term="所属组织">
              <Row>
                <Col span={16}>
                  {this.state.organisationInEdit ?
                    <Input
                      defaultValue={this.state.user.organisation}
                      placeholder="请输入"
                      onChange={this.handleOrganisationChange}
                      onPressEnter={this.hanleClickSaveOrganisation}
                      style={{ width: 100 }}
                    />
                    :
                    this.state.user.organisation
                  }
                </Col>
                <Col span={8}>
                  {this.state.organisationInEdit ?
                    <div>
                      <Icon
                        type="check"
                        className="editable-cell-icon"
                        onClick={this.hanleClickSaveOrganisation}
                      />
                      <Icon
                        type="close"
                        className="editable-cell-icon"
                        onClick={this.hanleClickCancelOrganisation}
                      />
                    </div>
                    :
                    <Icon
                      type="edit"
                      className="editable-cell-icon"
                      onClick={this.hanleClickEditOrganisation}
                    />
                  }
                </Col>
              </Row>
            </Description>
            </DescriptionList>
          <DescriptionList style={{ marginTop: 20 }} col={2}>
            <Description term="岗位">
            <Row>
                <Col span={16}>
                  {this.state.jobsInEdit ?
                    <Input
                      defaultValue={this.state.user.jobs}
                      placeholder="请输入"
                      onChange={this.handleJobsChange}
                      onPressEnter={this.hanleClickSaveJobs}
                      style={{ width: 100 }}
                    />
                    :
                    this.state.user.jobs
                  }
                </Col>
                <Col span={8}>
                  {this.state.jobsInEdit ?
                    <div>
                      <Icon
                        type="check"
                        className="editable-cell-icon"
                        onClick={this.hanleClickSaveJobs}
                      />
                      <Icon
                        type="close"
                        className="editable-cell-icon"
                        onClick={this.hanleClickCancelJobs}
                      />
                    </div>
                    :
                    <Icon
                      type="edit"
                      className="editable-cell-icon"
                      onClick={this.hanleClickEditJobs}
                    />
                  }
                </Col>
              </Row>
            </Description>
          </DescriptionList>
        </Card>
      </PageHeaderLayout>
    );
  }
}
